import React, { Component } from 'react'
import Context from '../../utils/context'
import Banner from "../banner"
import Alert1 from "../alert1"

export default class alert extends Component {
    static contextType = Context;
    state = {
        isSHow1: false,
        n: 0
    }
    render() {
        let { con: { name, price, list }, closeAlert } = this.context
        let { isSHow1 } = this.state
        return (
            <div className={`${this.context.ani}`}>
                <h1 onClick={closeAlert}>关闭</h1>
                <Banner list={list} />
                <h2>{name}</h2>
                <h3>{price}</h3>
                <button onClick={this.addCar}>加入购物车</button>
                <div>购物车:{this.state.n}</div>
                {isSHow1 ? <Context.Provider value={{...this,bottomani:this.state.bottomani}}><Alert1/></Context.Provider> : null}
            </div>
        )
    }
    addCar = () => {
        this.setState({ isSHow1: true, bottomani: 'animate__fadeInUp' })
    }
    close2 = () => {
        this.setState({ bottomani: 'animate__fadeOutDown' }, () => {
            setTimeout(() => {
                this.setState({ isSHow1: false })
            }, 500)
        })
    }
    setN = () => {
        this.setState({ n: this.state.n + 1 })
    }
}
